<template>
    <section>
        <h2>
            正在进行<span>{{ runLen }}</span>
        </h2>
        <ol>
            <li v-for="(item, index) in todos" :key="item.id" v-show="!item.checked">
                <input type="checkbox" v-model="item.checked" />
                <!-- 点击p标签的时候进行编辑 -->
                <p v-if="!item.edit">{{ item.content }}</p>
                <input v-else ref="autoInput" v-model="item.content" type="text" style="width: 80%; margin-left: 30px" />
                <a href="javascript:;" @click="emit('delItem', index)">-</a>
            </li>
        </ol>
    </section>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
// 1、 接收父组件传过来的值
let { todos } = defineProps({
    todos: Array
})
// 2.统计个数
let runLen = computed(() => todos.filter(item => !item.checked).length)
//  3. 删除操作
let emit = defineEmits(['delItem'])

</script>

<script>
export default {
    name: 'runningCom',
}
</script>
<style scoped>
ol {
    padding: 0;
    list-style: none;
}

ol li {
    cursor: move;
}
</style>
  ​